<template>
    <div class="login">
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="icon">
            <van-icon name="audio" size="2rem" color="#fff" />
        </div>
        <div class="input">
            <van-field v-model="email" type="email" label="163邮箱" class="emailInput" />
            <van-field v-model="password" type="password" label="密码" class="passInput" />
            <van-button block round color="#ff6034" :style="{ marginTop: '0.2rem' }" @click="handleLogin">
                登录
            </van-button>
        </div>
    </div>
    <van-notify id="van-notify" />

</template>

<script lang='ts' setup>
import router from '@/router';
import { showNotify } from 'vant';
import { ref } from 'vue'
import { useStore } from 'vuex';
const store = useStore();
const email = ref('');
const password = ref('')
const onClickLeft = () => {
    history.back()
}
const handleLogin = async () => {
    let res = await store.dispatch('getLogin', { email: email.value, password: password.value })
    if (res.data.code === 200) {
        window.sessionStorage.setItem('token', res.data.token)
        store.commit('updateIsLogin', true)
        store.commit('updateUserInfo', { userName: res.data.account.userName, id: res.data.account.id })
        router.push('/')
        showNotify({ type: 'success', message: '登陆成功' });
    } else {
        showNotify({ type: 'danger', message: res.data.message });
    }
}

</script>
 
<style lang = "less" scoped>
.login {
    height: 100vh;
    overflow-y: hidden;
    background-color: #ee0a24;

    .icon {
        width: 100vw;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .input {
        padding: 0 1rem;

        .emailInput {
            border-radius: 0.2rem;
            margin-bottom: 0.2rem;
        }

        .passInput {
            border-radius: 0.2rem;
        }
    }
}
</style>